@import

    '../base/mixin',
    '../base/variable';

.ui-header,
.ui-footer {
    position: fixed;
    z-index: $z-index-head;
    left: 0;

    width: 100%;
}

.ui-header {
    line-height: $header-height;

    top: 0;

    display: -webkit-box;

    box-sizing: border-box;
    height: $header-height;
    padding: 0 10px;

    -webkit-box-align: center;
}

.ui-header-stable,
.ui-footer-stable {
    background-color: $stable-bg;
}

.ui-header-positive,
.ui-footer-positive {
    color: #fff;
    background-color: $positive-bg;
    a,
    a:active,
    i {
        color: #fff;
    }
}

.ui-footer {
    bottom: 0;

    height: 56px;
}

.ui-header ~ .ui-container {
    border-top: $header-height solid transparent;
}

.ui-footer ~ .ui-container {
    border-bottom: 56px solid transparent;
}

.ui-header h1 {
    font-size: 18px;

    position: relative;

    -webkit-box-sizing: border-box;
    padding-left: 10px;

    text-align: center;

    -webkit-box-flex: 1;
}

.ui-header .ui-icon-return {
    position: relative;
    left: -10px;
}

.ui-header .ui-btn {
    display: block;
}

/**
 * 垂直上下居中
 */
.ui-center {
    display: -webkit-box;

    width: 100%;
    height: 150px;

    text-align: center;

    -webkit-box-orient: vertical;
    -webkit-box-pack: center;
    -webkit-box-align: center;
}

/**
 * 一行内垂直上下居中
 */
.ui-center-hor {
    display: -webkit-box;

    width: 100%;

    text-align: center;

    -webkit-box-orient: vertical;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    -webkit-box-orient: horizontal;
}

/**
 * 平铺
 */
.ui-tiled {
    display: -webkit-box;

    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: 100%;
    height: 100%;
}

.ui-tiled li {
    display: -webkit-box;

    width: 100%;

    text-align: center;

    -webkit-box-flex: 1;
    -webkit-box-orient: vertical;
    -webkit-box-pack: center;
    -webkit-box-align: center;
}
